<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="">
		<meta name="author" content="">
		<title>区块链管理平台</title>
		<!-- Custom fonts for this template -->
		<link href="https://s0.pstatp.com/cdn/expire-1-M/font-awesome/5.1.0/css/all.css" rel="stylesheet" type="text/css">
		<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
		 rel="stylesheet">
		<!-- Custom styles for this template -->
		<link href="../css/sb-admin-2.min.css" rel="stylesheet">
		<link rel="icon" href="../img/zfsoft.ico">
		<!-- Custom styles for this page -->
		<link href="../vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../css/element.css">
	</head>
	<body id="page-top">

		<!-- Page Wrapper -->
		<div id="wrapper">

			<!-- Sidebar -->
			<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

				<!-- Sidebar - Brand -->
				<a class="sidebar-brand d-flex align-items-center justify-content-center" href="introduce.html">
					<div class="sidebar-brand-icon rotate-n-15">
						<i class="fas" >
							<img src="../img/zfsoft.ico" width="40" height="40"/>
						</i>
					</div>
					<div class="sidebar-brand-text mx-3">区块链管理平台</sup></div>
				</a>

				<!-- Divider -->
				<hr class="sidebar-divider my-0">

				<!-- Nav Item - Dashboard -->
				<li class="nav-item active">
					<a class="nav-link" href="introduce.html">
						<i class="fas fa-fw fa-folder"></i>
						<span>使用向导</span></a>
				</li>

				<!-- Divider -->
				<hr class="sidebar-divider">

				<!-- Heading -->
				<div class="sidebar-heading">
					管理配置
				</div>

				<!-- Nav Item - Pages Collapse Menu -->
				<li class="nav-item">
					<a class="nav-link collapsed" href="host.html"
					 aria-controls="collapseTwo">
						<i class="fas fa-fw fa-cog"></i>
						<span>主机管理</span>
					</a>
				</li>

				<!-- Nav Item - Utilities Collapse Menu -->
				<li class="nav-item">
					<a class="nav-link collapsed" href="organizations.html"
					 aria-controls="collapseUtilities">
						<i class="fas fa-fw fa-wrench"></i>
						<span>组织管理</span>
					</a>
				</li>

				<!-- Nav Item - Utilities Collapse Menu -->
				<li class="nav-item">
					<a class="nav-link collapsed" href="channel.html"
						aria-controls="collapseUtilities">
						<i class="fas fa-fw fa-chart-area"></i>
						<span>通道管理</span>
					</a>
				</li>

				<li class="nav-item">
					<a class="nav-link collapsed" href="net.html">
					  <i class="fas fa-fw fa-table"></i>
					  <span>网络管理</span>
					</a>
				  </li>			



			</ul>
			<!-- End of Sidebar -->

			<!-- Content Wrapper -->
			<div id="content-wrapper" class="d-flex flex-column">

				<!-- Main Content -->
				<div id="content">

					<!-- Topbar -->
					<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

						<!-- Sidebar Toggle (Topbar) -->
						<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
							<i class="fa fa-bars"></i>
						</button>

						<ul class="navbar-nav ml-auto">

							<div class="topbar-divider d-none d-sm-block"></div>

							<!-- Nav Item - User Information -->
							<li class="nav-item dropdown no-arrow">
								<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown"
								 aria-haspopup="true" aria-expanded="false">
									<span class="mr-2 d-none d-lg-inline text-gray-600 small">Admin</span>
									<img class="img-profile rounded-circle" src="../img/admin.jpg">
								</a>
								<!-- Dropdown - User Information -->
								<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
									<a class="dropdown-item" href="/deploy/logout">
<!--										<a href="javascript:location.reload();"></a>-->
										<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
										退出
									</a>
								</div>
							</li>
						</ul>
					</nav>
					<!-- End of Topbar -->

					<!-- Begin Page Content -->
					<div class="container-fluid">
						<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
							<!-- Page Heading -->
							<h1 class="h3 mb-2 text-gray-800">使用向导</h1>
							<h2 class="h5 mb-2 text-gray-800">使用向导帮助您使用此系统构建区块链网络。</h2>
                        

                            <div class="ant-card-body">
                                <div class="result___jgHD9">
                                    <div class="title___3a5TK">构建区块链网络流程</div>
<!--                                    <div>-->
<!--                                        <div class="ant-row title___3a5TK">-->
<!--                                            <div class="ant-col ant-col-6">-->
<!--                                                <span>1、添加主机</span>-->
<!--											</div>-->
<!--											<div class="ant-col ant-col-3">-->
<!--												<img src="../img/guide.png">-->
<!--											</div>-->
<!--											<div class="ant-col ant-col-6">-->
<!--                                                <span>2、创建组织</span>-->
<!--											</div>-->
<!--											<div class="ant-col ant-col-3">-->
<!--												<img src="../img/guide.png">-->
<!--											</div>-->
<!--											<div class="ant-col ant-col-6">-->
<!--                                                <span>3、创建通道</span>-->
<!--											</div><div class="ant-col ant-col-3">-->
<!--											<img src="../img/guide.png">-->
<!--										</div>-->
<!--											<div class="ant-col ant-col-6"></div>-->
<!--                                                <span>4、创建网络</span>-->
<!--										</div>-->
<!--									</div>-->
								</div>
								<div class="ant-row">
								<div class="ant-col ant-col-2">
                                <div class="subtitle___2-mcp">1、添加主机</div></div>
                                <div class="ant-col ant-col-22">
                                    <div class="description___3lwPd">主机是运行区块链网络的载体，添加主机前需要确认主机网络连接正常，到主机管理页面，将目标主机添加到区块链系统中。</div>
                                </div></div><div class="ant-row">
                                    <div class="ant-col ant-col-2">
                                        <div class="subtitle___2-mcp">2、创建组织</div></div>
                                <div class="ant-col ant-col-22">
                                <div class="description___3lwPd">在组织管理中，可创建新的组织，组织分为两种类型，分别为“peer”和“orderer”，每个网络中必须包含至少1个“orderer”组织和多个“peer”组织。
                                    “orderer”组织的主机（创建组织的时候会自动生成，不必单独创建）为交易排序，“peer”组织为联盟中的成员，可根据具体需求定义。
                                    </div></div></div>

                                    <div class="ant-row">
                                        <div class="ant-col ant-col-2">
                                            <div class="subtitle___2-mcp">3、创建通道</div></div>
                                    <div class="ant-col ant-col-22">
                                    <div class="description___3lwPd">通道是Fabric网络上的私有隔离机制，通道中的链码和交易只有加入该通道的节点可见，同一个节点可以加入多个通道，并为每个通道内容维护一个账本。
                                        </div></div></div>
  
                                    <div class="ant-row">
                                    <div class="ant-col ant-col-2">
                                    <div class="subtitle___2-mcp">4、创建网络</div></div><div class="ant-col ant-col-22">
                                    <div class="description___3lwPd">在主机和组织都准备好之后，到网络管理中创建区块链网络，网络在创建之后会自动启动，所有属于本网络组织的节点都会启动，至此，已完成了区块链网络的构建。</div></div></div></div>

						</el-form>
					</div>
					<!-- /.container-fluid -->

				</div>
				<!-- End of Main Content -->


				<!-- Footer -->
				<footer class="sticky-footer bg-white">
					<div class="container my-auto">
						<div class="copyright text-center my-auto">
							<span>Copyright &copy; 卓繁信息 2020</span>
						</div>
					</div>
				</footer>
				<!-- End of Footer -->

			</div>
			<!-- End of Content Wrapper -->

		</div>
		<!-- End of Page Wrapper -->

		<!-- Scroll to Top Button-->
		<!-- <a class="scroll-to-top rounded" href="#page-top">
			<i class="fas fa-angle-up"></i>
		</a> -->

		<!-- Logout Modal-->
		<!-- <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
						<button class="close" type="button" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">×</span>
						</button>
					</div>
					<div class="modal-body">确定要退出码？</div>
					<div class="modal-footer">
						<button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
						<a class="btn btn-primary" href="login.html">退出</a>
					</div>
				</div>
			</div>
		</div> -->

		<!-- Bootstrap core JavaScript-->
		<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="https://www.jq22.com/jquery/bootstrap-4.2.1.js"></script>

		<!-- Core plugin JavaScript-->
		<script src="../vendor/jquery-easing/jquery.easing.min.js"></script>

		<!-- Custom scripts for all pages-->
		<script src="../js/sb-admin-2.min.js"></script>

		<!-- Page level plugins -->
		<script src="../vendor/datatables/jquery.dataTables.min.js"></script>
		<script src="../vendor/datatables/dataTables.bootstrap4.min.js"></script>

		<!-- Page level custom scripts -->
		<script src="../js/demo/datatables-demo.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="../js/element.js"></script>
		<script type="text/javascript">
			$(function(){
				if(window.history && window.history.pushState){
					$(window).on("popstate", function(){
						window.history.pushState("forward", null, "#");
						window.history.forward(1);
					});
				}
				window.history.pushState("forward", null, "#"); //在IE中必须得有这两行
				window.history.forward(1);
			});
		</script>

	</body>

</html>
